<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')" align-center>
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right">
            <sc-form-table ref="table" v-model="form.report" :addTemplate="form.report" placeholder="暂无数据" height="600" @son="rowAdd">
                <el-table-column prop="two_process_id" label="工序" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.two_process_id" filterable placeholder="请选择工序" style="width:100%" @change="processChange($event,scope.row)">
                            <el-option v-for="item in process" :key="item.two_process_id" :label="item.two_process_title" :value="item.two_process_id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="staff_id" label="员工" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.staff_id" filterable placeholder="请选择员工" style="width:100%">
                            <el-option v-for="item in scope.row.staff" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="size_data" label="尺码" align="center">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.size_data" :key="index">
                            <el-input v-model="item.goods_size" readonly></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="total_num" label="报工数量" align="center">
                    <template #default="scope">
                        <div v-for="(item,index) in scope.row.size_data" :key="index">
                            <el-input v-model="item.total_num"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="报工日期" align="center">
                    <template #default="scope">
                        <el-date-picker v-model="scope.row.date" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择报工日期" />
                    </template>
                </el-table-column>
            </sc-form-table>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '收货录入',
				edit: '收货录入',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				produce_no: "",
                report:[]
			},
            report:{},
            methodType:"",
            list:[],
            staffList:[],
            process:[],
            needArray:[]
		}
	},
	mounted() {
        this.getStaff()
        console.log('this.form.report :>> ', this.form.report);
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
                    res = await this.$API.produce.workshop.enterReport.post(this.form);
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
                        this.isSaveing = false;
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setDate(data) {
            this.form.produce_no = data.produce_no
            var res = await this.$API.produce.workshop.staffProcess.get({produce_no:data.produce_no});
            let array = []
            data.orderDetail.map(item=>{
                array.push({
                    goods_size:item.goods_size,
                    total_num:0
                })
            })
            this.process = res.data
            this.needArray = array
            this.rowAdd()
		},
        rowAdd(){
            let newList = JSON.parse(JSON.stringify(this.needArray))
            this.form.report.push({
                size_data:newList,
            })
            function removeArrays(arr) {
                return arr.filter(item => !Array.isArray(item));
            }
            var cleanedArray = removeArrays(this.form.report);
            this.form.report = cleanedArray
        },
        // 获取员工
        async getStaff() {
			var res = await this.$API.all.staff.get();
			this.staffList = res.data;
		},
        processChange(e,row){
            this.process.map(item=>{
                if(item.two_process_id==e){
                    row.staff = item.staff_list
                }
            })
        }
	}
}
</script>

<style>
.el-input-group__append{
    padding: 0 6px;
}
</style>
